<template>
  <div class="upload-file-box">
    <el-image v-if="props.modelValue" style="width: 100%; height: 100%" :src="props.modelValue" fit="cover" />
    <span class="logo" v-else>LOGO</span>
  </div>
</template>
<script setup lang="tsx">
import { reactive, ref, watch, computed } from 'vue'

interface Props {
  modelValue: string
}
const props = withDefaults(defineProps<Props>(), {
    modelValue: ''
})
const emit = defineEmits(['update:modelValue'])

</script>
<style scoped lang="scss">
$length: 100px;

  .upload-file-box{
    margin-top: 12px;
    width: $length;
    height: $length;
    position: relative;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    .logo{
      letter-spacing: 2px;
    }
  }
</style>
